<template>
    <div id="container"></div>
    <!-- 搜索框 -->
    <InputMode></InputMode>
    <!-- 功能条 -->
    <FunctionalMode></FunctionalMode>
    <!-- 用户中心 -->
    <AccountMode></AccountMode>
    <!-- 天气查询 -->
    <WeatherMode></WeatherMode>
</template>

<script setup>
import { onMounted, onUnmounted, provide, ref } from 'vue';
import FunctionalMode from '../components/FunctionalMode.vue';
import InputMode from '../components/InputMode.vue';
import AccountMode from '../components/AccountMode.vue';
import WeatherMode from '../components/WeatherMode.vue';
// 高德地图API加载
import AMapLoader from '@amap/amap-jsapi-loader';

// 全局声明
let exmap = ref(null);
let exAMap = ref(null);

/* async function init(params) {
  const AMap = await AMapLoader.load({
    key: '73e59768fece08c22145999d58cdbb7d',
    version: '2.0',
    //引入的插件列表（与api加载器一同加载⚠️）
    plugins: [],
  });
    const map = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 11,
    center: [114.30549, 30.59504],
  });
  p
} */

onMounted(async () => {
  // 配置key
  window._AMapSecurityConfig = {
    securityJsCode: '3803fef5273a37c33f6c81666572c9c4',
  };
  // 异步加载高德地图API（等待API加载完成后，在创建底图实例map）
  const AMap = await AMapLoader.load({
    key: '73e59768fece08c22145999d58cdbb7d',
    version: '2.0',
    //引入的插件列表（与api加载器一同加载⚠️）
    plugins: [],
  });

  // 创建地图实例map
  const map = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 11,
    center: [114.30549, 30.59504],
  });

  exmap.value = map;
  exAMap.value = AMap;
  console.log(map, AMap, '321');

  // plugin异步添加控件（等用户使用时在加载⚠️）
  AMap.plugin(
    [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.ControlBar',
      'AMap.Geolocation',
      'AMap.CitySearch',
    ],
    function () {
      //缩放控件
      map.addControl(new AMap.ToolBar());
      //比例尺控件
      map.addControl(new AMap.Scale());
      //罗盘控件
      map.addControl(
        new AMap.ControlBar({
          position: { right: '-8px', bottom: '111px' },
        })
      );
      // 定位控件
      map.addControl(
        new AMap.Geolocation({
          position: { right: '20px', bottom: '88px' },
          enableHighAccuracy: true, // 高精度定位，默认：true
          timeout: 10000, // 设置定位超时时间，默认：无穷大
          zoomToAccuracy: true, // 定位成功自动调整zoom
        })
      );
      /*  //ip定位
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          console.log(result,'123')
        }
      }); */
    }
  );
});

// 导出动态map实例
provide('ex', {
  exAMap,
  exmap,
});
</script>

<style lang="scss" scoped>

</style>
